<template>
  <view>
    <!-- 固定顶部区域 -->
    <view class="fixed-top-container">
      <!-- 返回组件 -->
      <view class="fixed-back">
        <back :showBackText="false" customClass="bg-gradual-blue text-white" :showTitle="true" title="选择专业"></back>
      </view>
      
      <!-- 分类导航 -->
      <view class="fixed-nav" v-if="cateData.length > 0">
        <scroll-view scroll-x class="nav" scroll-with-animation :scroll-into-view="'cate-'+cateId">
          <view style="display: flex; justify-content: center; width: fit-content; min-width: 100%;">
            <view class="nav-item" 
                  v-for="(cate, index) in cateData" 
                  :key="index"
                  :id="'cate-'+cate.id"
                  :class="{'active': cate.id == cateId}"
                  @tap="selectCategory(cate.id, cate.name)">
              {{ cate.name }}
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <view v-if="load" class="content-container" :class="{'no-nav-content': cateData.length === 0}">
      <!-- 列表容器 -->
      <scroll-view scroll-y class="list-scroll-view" :class="{'no-nav-scroll': cateData.length === 0}">
        <!-- 列表 -->
        <view class="cu-list menu">
          <view class="cu-item arrow" @tap="professionTap" :data-data="professionItem"
                v-for="(professionItem, index) in listData" :key="index">
            <view class="content">
              <text class="cuIcon-read text-pink"></text>
              <text class="profession-name">{{ professionItem.name }}</text>
            </view>
            <view class="action" v-if="professionItem.old_name">
              <text class="text-sm">原{{ professionItem.old_name }}</text>
            </view>
          </view>
        </view>
        
        <!-- 无数据提示 -->
        <view class="empty-tip" v-if="listData.length === 0">
          <text>该分类下暂无专业</text>
        </view>
        
        <!-- 底部安全区域，防止广告遮挡 -->
        <view class="safe-area-bottom"></view>
      </scroll-view>
      
    </view>
    
    <!-- 加载中提示 -->
    <view class="loading-container" v-if="!load">
      <view class="ios-loading"></view>
      <text>加载中</text>
    </view>
  </view>
</template>

<style src="./profession.css"></style>
<script src="./profession.js"></script>